<template>
  <div class="pinglunlist f-d-c" v-if="firstdatalist">
    <div class="pinglunbox">
      <img class="userinmg" :src="firstdatalist.image" alt="" />
      <div class="pinglun_item">
        <div class="uer f-a-c">
          <span>{{ firstdatalist.userName }}</span>
          <span>{{ firstdatalist.createTime }}</span>
        </div>
        <div class="pingluncontent">
          <span>{{ firstdatalist.detail }}</span>
        </div>
        <div
          class="callback click f-j-a-c"
          @click="callbacknow()"
          v-if="!inputCheck"
        >
          <span>回复</span>
        </div>
        <commentinput
          @sendType="sendType"
          :parentId="parentId"
          :uid="uid"
          v-else
        ></commentinput>

        <!-- <div class="imgbox f-a-c">
          <div class="imglist" v-for="(item, index) in 8" :key="index">
            <img src="../../../assets/image/113.png" alt="" />
          </div>
        </div> -->
      </div>
      <div class="chakan click" @click="openCallbak" v-if="total">
        <span>共{{total}}条回复，点击查看</span>
      </div>
    </div>
  </div>
</template>

<script>
import { commentGet } from "@/axios/api.js";
import commentinput from "./commentinput.vue";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  onUpdated,
  onBeforeUnmount,
  watch,
} from "vue";
import { useStore } from "vuex";
// import { emit } from "process";
export default defineComponent({
  props: {
    typeID: {
      type: [String, Number],
      default: 0,
    },
    listcheck: {
      type: Boolean,
      default: false,
    },
    firstdatalist: {
      type: Array,
      default: [],
    },
  },
  components: {
    commentinput,
  },

  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      inputCheck: false,
      datalist: [],
      total: 0,
      parentId: 0,
      uid:"",
    });
    let detailid = computed(() => {
      return store.state.detailid;
    });
    watch(
      () => props.firstdatalist,
      (newVal, oldVal) => {
        getcommentGettotle(props.firstdatalist.id);
      }
    );

    onMounted(() => {
      // getcommentGet();
    });

    onBeforeUnmount(() => {});
    onUpdated(() => {});
    onUnmounted(() => {});
    // 评论列表
    // let getcommentGet = () => {
    //   //       modelId 模型id
    //   // parentId 父评论id
    //   // page limit
    //   commentGet({
    //     modelId: detailid.value,
    //     parentId: "",
    //     page: 1,
    //     limit: 10,
    //   }).then((res) => {
    //     data.datalist = res.data.records[0];
    //     console.log(data.datalist);
    //     getcommentGettotle(res.data.records[0].id);
    //     console.log(res);
    //   });
    // };
    let getcommentGettotle = (id) => {
      commentGet({
        modelId: 0,
        parentId: id,
        page: 1,
        limit: 10,
      }).then((res) => {
        console.log(123123123);
        data.total = res.data.total;
      });
    };
    let callbacknow = () => {
      data.parentId = props.firstdatalist.id;
      data.uid = props.firstdatalist.uid
      data.inputCheck = true;
    };
    let sendType = () => {
      data.inputCheck = false;
      getcommentGettotle(props.firstdatalist.id);
    };

    // 打开回复弹窗
    let openCallbak = () => {
      emit("openCallClick", props.firstdatalist.id);
    };
    return {
      openCallbak,
      sendType,
      callbacknow,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.chakan {
  margin-top: 36px;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
  }
}
.pinglunlist {
  margin-top: 51px;
  // height: 740px;
  width: 100%;
  .pinglunbox {
    position: relative;
    // height: 336px;
    border-bottom: 1px solid #ececec;
    padding: 0 60px;
    padding-bottom: 20px;
    margin-top: 10px;
  }
  .userinmg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .pinglun_item {
    .uer {
      margin-bottom: 20px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
        &:last-child {
          margin-left: 20px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }
    .pingluncontent {
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
    }
    .callback {
      margin-top: 10px;
      width: 50px;
      height: 26px;
      background: #f3f4f5;
      border-radius: 6px 6px 6px 6px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
    .imgbox {
      margin-top: 10px;
      flex-wrap: wrap;
      .imglist {
        margin-right: 10px;
        margin-top: 13px;
        > img {
          border-radius: 20px;
          width: 200px;
          height: 200px;
        }
      }
    }
  }
}
</style>
